<template>
  <el-form class="app-margin-interval" :model="FormData" :rules="rules" label-width="120px">
    <el-form-item label="默认标题" prop="title">
      <el-input show-word-limit maxlength="40" v-model="FormData.title"/>
    </el-form-item>
    <el-form-item label="默认关键词" prop="keywords">
      <el-input show-word-limit maxlength="80" v-model="FormData.keywords" type="textarea"/>
    </el-form-item>
    <el-form-item label="默认描述" prop="description">
      <el-input show-word-limit maxlength="150" v-model="FormData.description" type="textarea"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" long @click="onSubmit">保存SEO规则</el-button>
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue"
import {getDefaultApi, setDefaultApi} from "@/apps/admin/api/system/seo";
import {ElMessage} from "element-plus";
import {useCloseMessageBox} from "@/hooks/DialogMsg";

export default defineComponent({
  name: "DefaultSeo",
  setup() {
    const FormData = ref({
      title: '',
      keywords: '',
      description: ''
    })


    /**
     * 表单验证规则
     */
    const rules: any = {
      title: [
        {required: true, message: '请输入网站标题', trigger: 'blur'},
        {max: 40, message: '网站标题不能超过40个字', trigger: 'blur'},
      ],
      keywords: [
        {required: true, message: '请输入网站关键词', trigger: 'blur'},
        {max: 80, message: '网站关键词不能超过80个字', trigger: 'blur'},
      ],
      description: [
        {required: true, message: '请输入网站描述', trigger: 'blur'},
        {max: 150, message: '网站描述不能超过150个字', trigger: 'blur'},
      ]
    }


    /**
     * 获取默认规则
     */
    getDefaultApi().then(result => {
      if (result.code === 200) {
        FormData.value = {
          title: result.data.title,
          keywords: result.data.keywords,
          description: result.data.description
        }
      }
    })

    /**
     * 关闭弹窗
     */
    const close = useCloseMessageBox()

    /**
     * 提交修改
     */
    function onSubmit() {
      setDefaultApi({...FormData.value}).then(result => {
        if (result.code === 200) {
          ElMessage.success(result.msg)
          close()
        }
      })
    }

    return {
      FormData, rules, onSubmit
    }
  }
})
</script>